<template>
  <div v-show="showHeaderAndFooter">
    <Header />
  </div>
  <Suspense>
    <router-view></router-view>
  </Suspense>
  <div v-show="showHeaderAndFooter">
    <Footer />
  </div>
</template>

<script>
import Header from './pages/Header.vue';
import Footer from './pages/Footer.vue';
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  components: {
    Header,
    Footer
  },
  setup() {
    const route = useRoute();
    const showHeaderAndFooter = ref(route.path !== '/login' && route.path !== '/register');
    const onRouteChange = () => {
      // 判断当前路由路径是否为登录或注册页面，如果不是，则显示头部和底部
      showHeaderAndFooter.value = route.path !== '/login' && route.path !== '/register';

      // 打印当前路由路径
      console.log('Route changed to:', route.path); 

      // 打印更新后的 showHeaderAndFooter 的值
      console.log('Updated showHeaderAndFooter:', showHeaderAndFooter.value); 
    };
    onMounted(() => {
      window.addEventListener('routeChange', onRouteChange);
    });
    onUnmounted(() => {
      window.removeEventListener('routeChange', onRouteChange);
    });

    return {
      showHeaderAndFooter
    };
  }
};
</script>

<style scoped></style>
